import React from 'react';
import {HStack, View, Text, Heading, Icon, SearchIcon, Center, Pressable} from "@gluestack-ui/themed";
import {dateScreenList} from "@/theme/enums/screen";
import {useTheme} from "@/hooks";
import {Option} from "@/types/public";

const ScreenItem = (props: { option: Option, value: string, onPress: (option: Option) => void }) => {
    const {option, value, onPress} = props;
    const {layout, colors} = useTheme();
    const isActive = option.value == value;
    return (
        <Pressable
            style={[layout.flex_1]}
            bg={isActive ? "$primary500" : "transparent"}
            borderWidth={0.5}
            borderColor={isActive ? "$primary500" : '$white'}
            borderRadius="$lg"
            onPress={() => onPress(option)}
        >
            <Center
                h={34}
            >
                <Text
                    size="sm"
                    color={isActive ? '$white' : '$textLight950'}
                >{option.label}</Text>
            </Center>
        </Pressable>
    )
}

const DateScreen = (props: { onChange?: (option: Option) => void }) => {
    const {onChange} = props;
    const [dateList, setDateList] = React.useState(dateScreenList);
    const {layout} = useTheme();
    const [selDate, setSelDate] = React.useState('day');

    function handlePress(option: Option) {
        setSelDate(option.value);
        onChange && onChange(option);
    }

    return (
        <View px="$3">
            <HStack style={[layout.justifyBetween, layout.itemsCenter]}>
                <Heading color="$textLight950">巨量引擎</Heading>
                <Icon
                    as={SearchIcon}
                    color="$textLight950"
                    w="$5"
                    h="$5"
                />
            </HStack>
            <HStack space="sm" mt={7}>
                {dateList.map((item, index) => (
                    <ScreenItem
                        option={item}
                        value={selDate}
                        onPress={handlePress}
                        key={index}
                    ></ScreenItem>
                ))}
            </HStack>
        </View>
    );
};

export default DateScreen;